<template>
    <div class="container">
        <div class="t1" v-for="(item1,index) in shuzu" :key="item1.id">
            {{item1.name}}
            <div class="t2" v-for="(item2,index) in item1.child" :key="item2.id">
                {{item2.name}}
                <div class="t3" v-for="(item3,index) in item2.child" :key="item3.id">
                    {{item3.name}}
                </div>
            </div>

        </div>
    </div>
</template>

<style lang="less" scoped>
    .t1{
        background-color: yellow;
        width: 100px;
        height: 100px;
        border-bottom: 1px red solid;
    }
</style>

<script>
export default {
    data() {
        return {
            shuzu:[
                {
                    name:"c1-1",
                    id:11,
                    child:{
                        name:"c2-1",
                        id:21,
                        child:{
                            name:"c3-1",
                            id:31
                        }
                    }
                },
                {
                    name:"c1-2",
                    id:12,
                    child:{
                        name:"c2-2",
                        id:22,
                        child:{
                            name:"c3-2",
                            id:32,
                        }
                    }
                },
                {
                    name:"c1-3",
                    id:13,
                    child:{
                        name:"c2-3",
                        id:23,
                        child:{
                            name:"c3-3",
                            id:33,
                        }
                    }
                }
            ]
        }
    },
}
</script>